
<div class="container-fluid" style="margin: 20px">
    <div class="skyblue-br-row row">
        <div class="col-xs-9 skyblue-br" >
            <div style="width: 100%;height: 100%; display: flex; justify-content: space-between">
<!--                <div  style=" height: 100%;min-height: 400px;overflow: auto;"  >-->
<!--                </div>-->
                <div id="mySequenceDiagramDiv" style="width: 100%; height: 100%;position: relative;"></div>
            </div>
        </div>
        <div class="col-xs-3 skyblue-br" >
            <button onclick="addSequenceDiv()" type="button" class="btn btn-primary" style="margin: 20px">新建模块</button>

            <button onclick="saveSequence()" type="button" class="btn btn-success" style="margin: 20px"> 保存数据 </button>
            <button onclick="loadSequence()" type="button" class="btn btn-danger" style="margin: 20px"> 加载数据 </button>
            <textarea id="mySequenceSavedModel" style="width:100%;height:600px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [ {"key":"Fred", "text":"开始", "isGroup":true, "loc":"0 0", "duration":9} ],
  "linkDataArray": []}
            </textarea>
        </div>
    </div>
</div>

<div class="modal fade" id="SequenceDialog" role="dialog" aria-labelledby="setListItemLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createSequenceTitle">这个是配置数据的弹窗</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" autofocus class="form-control" id="SequenceText">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" data-target="#setListItem"  class="btn btn-primary" id="createSequenceBut">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="./js/flowchart/sequenceDiagram.js"></script>
<script>

    var mySequenceSavedModel = document.getElementById("mySequenceSavedModel");
    var sequence = new SequenceDiagram("mySequenceDiagramDiv",mySequenceSavedModel);

    var isShow = false;
    initSequence();

    //显示数据
    function initSequence() {
        if (!isShow) {
            sequence.initSequence();
            isShow = true;
        }
    }

    function saveSequence() {
        document.getElementById("mySequenceSavedModel").value = sequence.saveSequence();
    }

    function loadSequence() {
        sequence.loadSequence();
    }
    
    function addSequenceDiv() {
        sequence.createStep()
    }

</script>